/**
 * Created by zzy on 2017/8/21.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    Dimensions,
    InteractionManager
} from 'react-native';
import ViewPager from '../component/ViewPager'
import Ionicons from 'react-native-vector-icons/Ionicons';
let ScreenWidth = Dimensions.get('window').width;
let ScreeenHeight=Dimensions.get('window').height;

import {observer} from 'mobx-react/native'
import waterTiket from '../store/WaterTiketPolicyMsg';
import Constant from "../Contant";
import NetRequest from '../util/NetRequest'
import waterTiketStore from '../store/WaterTiketStore'
import Parabolic from 'react-native-parabolic'
import TiketModelModal from '../component/TiketModelModal'
import {updateItemCount} from '../home/WaterShop'
@observer
export default class TicketInfo extends Component {

    constructor(props){
        super(props);
        this.state={
            px:-100,
            py:-100,

        }
        this.tagItem=this.props.tagItem;
        this.product=this.props.product;
        this.shopId=this.props.shopId;
        LOG('this.shopId----------'+this.shopId);
    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(() => {
            this.fetch();
        });
    }
    fetch(){
        var tiketParam={
            'productItemId':this.product.pItemModels[0].productItemId,
            'shopId':this.shopId
        };
        NetRequest.getTiketInfo(tiketParam).then((data)=>{
            LOG('product----------' + JSON.stringify(data));
            waterTiketStore.setProductItemModels(data)
        });
    }
    render() {
        return <View style={ticketDetail_style.sv}>
            <ScrollView style={{flex:1}}>
                <ViewPager images={[{uri:waterTiketStore.productModel.imageUrl}]}/>
                <View style={ticketDetail_style.info}>
                    <View style={ticketDetail_style.name}>
                        <View style={[ticketDetail_style.border, ticketDetail_style.center, {marginRight: 5}]}>
                            <Text style={ticketDetail_style.self}>自营</Text>
                        </View>
                        <Text>{waterTiketStore.productModel.name}</Text>
                    </View>
                    <Text style={{marginTop: 5}}>已售:100</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Text style={ticketDetail_style.price}>¥10.00</Text>
                        <View>
                            <TouchableOpacity style={{flexDirection:'row',borderRadius:15,backgroundColor:'#1EAFF3',padding:7}}
                                              onPress={()=>{
                                                  this._policy();
                                                  //this.onAdd();
                                              }}
                                              ref={'addCart'}
                            >
                                <Ionicons name="ios-cart-outline" color="#fff" size={18}/>
                                <Text style={{marginLeft:5,color:'white'}}>选套餐</Text>
                            </TouchableOpacity>
                            {
                                waterTiket.CartNum==0?(null):<View style={{
                                    position: 'absolute',
                                    right: 0,
                                    top: -10,
                                    width: 20,
                                    height: 20,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    borderRadius: 10,
                                    backgroundColor: 'red'
                                }}>
                                    <Text style={{color: '#fff', fontSize: 10}}>{waterTiket.CartNum}</Text>
                                </View>
                            }

                        </View>

                    </View>
                </View>
                <View style={ticketDetail_style.group}>
                </View>

                <View style={ticketDetail_style.detail}>

                    <Text style={{padding:5}}>水票详情</Text>
                    <Text>1.该水票仅限购买该品牌水;</Text>
                    <Text>2.每张水票换购一桶;</Text>
                    <Text>3.过期作废</Text>
                </View>
            </ScrollView>
            <TiketModelModal ref={"tiketModelModal"} callback={this._shoppingCartAction.bind(this)}/>
            <Parabolic
                ref={"parabolic"}
                style={{position: "absolute", right:10,top: this.state.py}}
                renderChildren={() => {
                    return (
                        <View style={{backgroundColor:"#f00", width: 16, height: 16, borderRadius: 8}}></View>
                    )
                }}
                animateEnd={this.animateEnd.bind(this)}
                curvature={.008}
                duration={250}
            />
        </View>
    }

    _policy(){
        this.refs.tiketModelModal._open();
    }
    onAdd(actionType){
        this.refs.addCart.measure((a, b, w, h, px,py) => {
            this.setState({
                py:py,
                px:px
            });
        });
        this.refs["parabolic"].run([this.state.px,this.state.py,10,ScreeenHeight-50])
        this._shoppingCartAction(actionType)
    }
    animateEnd(){

    }
    _shoppingCartAction(actionType){
        updateItemCount(this.tagItem,this.product,actionType);
        this.fetch();
    }
}

const ticketDetail_style = StyleSheet.create({
    sv: {
        backgroundColor: '#f5f5f5',
        flex: 1
    },

    info: {
        padding: 10,
        backgroundColor: 'white'
    },
    border: {
        borderWidth: 1 / PixelRatio.get(),
        borderColor: 'red'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    self: {
        fontSize: 10,
        fontWeight: '100',
        color: 'red',
        textAlign: 'justify',
        textAlignVertical: 'center'
    },
    name: {
        flexDirection: 'row'
    },
    price: {
        color: 'red',
        marginTop: 5,
        flex:1
    },
    group: {
        marginTop: 20
    },

    detail: {
        backgroundColor: 'white',
        padding: 10
    },
    policy_item:{
        borderWidth: 3 / PixelRatio.get(),
        margin:5,
        alignItems:'center',
        padding:3
    }
});